<script setup>
import useScreenWidth from "@/hooks/useScreenWidth";
const formatter = (row, column) => {
  return row.rain + "ml"
}
const changeRank = (column, prop, order) => {
  console.log(column.column)
  // console.log(prop)
  // console.log(order)
}
let ii=1
const tableData = [
  {
    rank: '4',
    city: '昌江13',
    province: '海南41',
    maxT: 14.9,
    minT: 12.1,
    diffT: 10.1,
    rain: 1917
  },
  {
    rank: '4',
    city: '昌江23',
    province: '海南33',
    maxT: 44.9,
    minT: 12.1,
    diffT: 10.1,
    rain: 1917
  },
  {
    rank: '4',
    city: '昌江33',
    province: '海南333',
    maxT: 44.9,
    minT: 22.1,
    diffT: 110.1,
    rain: 1917
  },
  {
    rank: '4',
    city: '昌江23',
    province: '海南323',
    maxT: 45.9,
    minT: 12.1,
    diffT: 10.1,
    rain: 1917
  },
  {
    rank: '4',
    city: '昌江21',
    province: '海南111',
    maxT: 49.9,
    minT: 22.1,
    diffT: 10.1,
    rain: 1917
  },
  {
    rank: '4',
    city: '昌江122',
    province: '海南32',
    maxT: 49.9,
    minT: 21.1,
    diffT: 10.1,
    rain: 1917
  },
  {
    rank: '4',
    city: '昌江13',
    province: '海南41',
    maxT: 42.9,
    minT: 22.1,
    diffT: 10.1,
    rain: 1917
  },
  {
    rank: '4',
    city: '昌江23',
    province: '海南33',
    maxT: 14.9,
    minT: 2.1,
    diffT: 10.1,
    rain: 1917
  },
  {
    rank: '4',
    city: '昌江33',
    province: '海南333',
    maxT: 34.9,
    minT: 2.1,
    diffT: 10.1,
    rain: 1917
  },
  {
    rank: '4',
    city: '昌江23',
    province: '海南323',
    maxT: 34.9,
    minT: 32.1,
    diffT: 10.1,
    rain: 1917
  },
  {
    rank: '4',
    city: '昌江21',
    province: '海南111',
    maxT: 54.9,
    minT: 12.1,
    diffT: 10.1,
    rain: 1917
  },
  {
    rank: '4',
    city: '昌江122',
    province: '海南32',
    maxT: 54.9,
    minT: 52.1,
    diffT: 10.1,
    rain: 1917
  },
  {
    rank: '4',
    city: '昌江13',
    province: '海南41',
    maxT: 74.9,
    minT: 12.1,
    diffT: 10.1,
    rain: 1917
  },
  {
    rank: '4',
    city: '昌江23',
    province: '海南33',
    maxT: 54.9,
    minT: 12.1,
    diffT: 10.1,
    rain: 1917
  },
  {
    rank: '4',
    city: '昌江33',
    province: '海南333',
    maxT: 24.9,
    minT: 12.1,
    diffT: 10.1,
    rain: 1917
  },
  {
    rank: '4',
    city: '昌江23',
    province: '海南323',
    maxT: 48.9,
    minT: 21.1,
    diffT: 10.1,
    rain: 1917
  },
  {
    rank: '4',
    city: '昌江21',
    province: '海南111',
    maxT: 41.9,
    minT: 22.1,
    diffT: 130.1,
    rain: 19117
  },
  {
    rank: '4',
    city: '昌江122',
    province: '海南32',
    maxT: 14.9,
    minT: 12.1,
    diffT: 10.1,
    rain: 1917
  },
  {
    rank: '4',
    city: '昌江122',
    province: '海南32',
    maxT: 14.9,
    minT: 12.1,
    diffT: 10.1,
    rain: 1917
  },
  {
    rank: '4',
    city: '昌江122',
    province: '海南32',
    maxT: 14.9,
    minT: 12.1,
    diffT: 10.1,
    rain: 1917
  },


]
const {screenWidth}=useScreenWidth()
</script>

<template>
  <div class="weatherTable">
    <el-table
        :data="tableData"
        :default-sort="{ prop: 'maxT', order: 'descending' }"
        class="el-table"
    >

      <el-table-column class="el-table-column" prop="rank" @sort-change="changeRank" align="center" label="排名" :width="screenWidth<2000?50:80">
        <template #default="scope">
          {{ scope.$index+1 }}
        </template>
      </el-table-column>

      <el-table-column class="el-table-column" prop="city" align="center" label="城市" :width="70"/>
      <el-table-column class="el-table-column" prop="province" align="center" label="省份" :width="screenWidth<2000?70:80"/>
      <el-table-column class="el-table-column" prop="maxT" align="center" label="最高温度" :width="screenWidth<2000?105:110" sortable/>
      <el-table-column class="el-table-column" prop="minT" align="center" label="最低温度" :width="screenWidth<2000?105:110" sortable/>
      <el-table-column class="el-table-column" prop="diffT" align="center" label="昼夜温差" :width="screenWidth<2000?105:110" sortable/><!-- :formatter="formatter"-->
      <el-table-column class="el-table-column" prop="rain" align="center" label="24小时降水" width="125" sortable :formatter="formatter"/>

      <!--原
        <el-table-column prop="rank" @sort-change="changeRank" align="center" label="排名" width="80">
          <template #default="scope">
            {{ scope.$index+1 }}
          </template>
        </el-table-column>

        <el-table-column prop="city" align="center" label="城市" width="70"/>
        <el-table-column prop="province" align="center" label="省份" width="80"/>
        <el-table-column prop="maxT" align="center" label="最高温度" width="110" sortable/>
        <el-table-column prop="minT" align="center" label="最低温度" width="110" sortable/>
        <el-table-column prop="diffT" align="center" label="昼夜温差" width="110" sortable :formatter="formatter"/>
        <el-table-column prop="rain" align="center" label="24小时降水" width="125" sortable/>
      -->
    </el-table>
  </div>
</template>

<style scoped>
@media screen and (max-width:2000px){
  .weatherTable{
    width:100%;
    /*border:1px solid red;
    height:835px;*/
    padding-top:125px;
  }

  /*::v-deep .el-table__body{
    -webkit-border-horizontal-spacing: 0px;   水平间距
    -webkit-border-vertical-spacing: 0px;   垂直间距
    margin:0px;
  }*/
  .el-table{
    margin:0;
    padding:0;
    font-size:12px;/*控制表格全部字体大小*/
  }


  /*控制表头字体大小*/
  /*::v-deep .el-table thead{
      font-size:1px;
      width:2px;
  }*/

  /*::v-deep .el-table td{
      line-height:1px;
      height:1px;
  }

  ::v-deep .el-table tr{
      line-height:1px;
      height:1px;
  }*/

  /*::v-deep .el-table-column{
       width:70px;
       height:1px;
       margin:0px;
       padding:0px;
  }*/

  /*::v-deep .el-table-column{
           .cell{
           height:1px;
           width:1px;
           font-size:1px;
       }
  }*/
}
</style>
<!--2024/2/8 13:58-->